<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet"  href="/layui/css/layui.css"/>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>用户列表</title>
</head>
<body>
<script src="/plugins/jquery/jquery-1.10.2.min.js"></script>
<script  src="/layui/layui.js"></script>
<script src="/plugins/js/common.js"></script>
<fieldset class="layui-elem-field layui-field-title" style="margin-top:5px;">
  <legend>数据展示</legend>
</fieldset>
<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">区域详情</li>
    <li>后台系统用户</li>
    <li>app用户</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
		    <form class="layui-form" id="saveForm">
			<br>
			  <div class="layui-form-item">
				    <div class="layui-inline">
				      <label class="layui-form-label">区域名称：</label>
				      <div class="layui-input-inline">
			        	<div class="layui-form-mid layui-word-aux" th:text="${areaInfo.name}">
			       	 	</div>
				    </div>
				    </div>
			  </div>
			   <div class="layui-form-item">
				   <div class="layui-inline">
				      <label class="layui-form-label">区域编码：</label>
				     <div class="layui-input-inline">
			        	<div class="layui-form-mid layui-word-aux" th:text="${areaInfo.code}">
			       	 	</div>
				    </div>
				  </div>
			  </div>
		   <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">所属级别：</label>
			      <div class="layui-input-inline">
			        <div th:switch="${areaInfo.grade}" class="layui-form-mid layui-word-aux">
			            <p th:case="1">省</p>
						<p th:case="2">市</p>
						<p th:case="3">区县</p>
					</div>
			      </div>
			    </div>
		  </div>
		</form>
    </div>
    <div class="layui-tab-item">
    	<table class="layui-hide" id="userList"  lay-filter="userList"></table>
    </div>
    <div class="layui-tab-item">
    	<table class="layui-hide" id="appUserList"  lay-filter="appUserList"></table>
    </div>
  </div>
</div>  
<script type="text/javascript" th:inline="javascript">
var table;
var layer;
layui.use(['form','table'], function(){
	layer=layui.layer;
	  table = layui.table;
	  tableIns = initUserListTable(table);
	  tableIns = initAppUserListTable(table);
});

layui.use('element', function(){
    var element = layui.element;
    var $ = layui.jquery;
    // 一些事件监听
    element.on('tab(tab-card-title)', function(data){
        $(".layui-tab-item").each(function () {
           $(this).removeClass('layui-show');
        });
        $(".tag-item-"+data.index).removeClass('layui-show').addClass('layui-show');
    });
});

function initUserListTable(){
	table.render({
	    elem: '#userList',
	    url:'/area/userListData?areaId='+[[${param.areaId}]],
	    cellMinWidth: 30,
	    cols:[
		    	[
			      {field:'userName'  ,title: '用户名'},
			      {field:'phone', title: '联系方式'},
			      {field:'realName',  title: '真实名称'},
			      {field:'areaName',  title: '所属区域'},
			      {field:'roleName',  title: '角色'},
			      {field:'state',  title: '状态',templet:function(value){
			    	  if(value.state==1){
			    		  return "正常";
			    	  }else{
			    		  return "锁定";
			    	  }
			      	}
			      }
		    	]
	    	],
	    id: 'reloadUserTable',
	    page: true,
	    limit:5
	  });
}

function initAppUserListTable(){
	table.render({
	    elem: '#appUserList',
	    url:'/area/appUserListData?areaId='+[[${param.areaId}]],
	    cellMinWidth: 30,
	    cols:[
		    	[
			      {field:'loginName'  ,title: '登录名'},
			      {field:'mobile', title: '联系方式'},
			      {field:'realName',  title: '真实名称'},
			      {field:'areaName',  title: '所属区域'},
			      {field:'vipState',  title: '用户类型',templet:function(value){
			    	  if(value.appUserType==1){
			    		  return "普通用户";
			    	  }else if(value.appUserType==2){
			    		  return "VIP会员";
			    	  }else{
			    		  return "地市推广代理"
			    	  }
			      	}
			      },
			      {field:'state', title: '状态',templet:function(value){
			    	  if(value.state==1){
			    		  return "正常";
			    	  }else{
			    		  return "锁定";
			    	  }
			      	}
			      }
		    	]
	    	],
	    id: 'reloadAppUserTable',
	    page: true,
	    limit:5
	  });
}
	
</script>
<style>
.layui-table-cell{
    height:22px;
    line-height:22px;
}
</style>
</body>
</html>